<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<html>
<head>
    <title>搜索结果</title>

    <link rel="stylesheet" href="${ctx}/static/styles/news/newsdetail.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/pagination.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/styles/result.css" type="text/css">

</head>
<body>
<div class="main">
    <div class="container row">
        <div class="search-result col-lg-8">
            <h2 class="search-title">搜索结果<span class="search-result-count">本次共搜索到${stdPage.totalElements}条结果</span></h2>
            <!--<h3 class="search-result-count"></h3>-->
            <div id="page-container">
                <ul class="search-result-list" id="data-ul">

                </ul>
            </div>
        </div>
        <div class="knowledge-graph col-lg-4">
            <h2 class="search-title">已选结果</h2>
            <ul class="selected-result">

            </ul>
            <button class="btn btn-primary submit-array" id="push-btn">提交</button>
        </div>
    </div>
</div>


<script type="text/javascript" src="${ctx}/static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/pagination.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
    {{#each this}}
    <li class="search-result-item" data-id="{{id}}">
        <div class="search-result-select">
            <input type="checkbox" name="result">
        </div>
        <a href="${ctx}/std/detail/{{id}}" class="search-result-more pull-right" target="_blank">
            查看详情
        </a>
        <div class="search-result-detail">
            <div class="search-result-detail-title">
                {{titleCn}}
            </div>
            <div class="search-result-detail-abs">
                {{workField}}
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);

    $('#page-container').pagination({
        dataSource: '${ctx}/quota/page',
        locator: 'content',
        totalNumber: ${stdPage.totalElements},
        pageSize: ${stdPage.size},
        ajax: {
            data: {keyword: '${keyword}'}
        },
        callback: function (data, pagination) {
            // template method of yourself
//            console.log("hello: "+ data);
            var html = template(data);
            $("#data-ul").html(html);
            findSeleted();
        }
    })

    var $selectId = [];
    $(document).on("click", "input[type='checkbox']", function () {
        if ($(this).is(":checked")) {
            $(this).parent(".search-result-select").addClass("selected");
            var $id = $(this).parents(".search-result-item").attr("data-id"),
                    $title = $(this).parents(".search-result-item").find(".search-result-detail-title").text();
            $("<li class='selected-item' data-id='" + $id + "'>" + $title + "</li>").appendTo($(".selected-result"));
            $selectId.push($id);
        } else {
            $(this).parent(".search-result-select").removeClass("selected");
            var $id = $(this).parents(".search-result-item").attr("data-id");
            removeByValue($selectId, $id);
            $(".selected-result").find("[data-id='" + $id + "']").remove();
        }
    })

    var removeByValue = function (arr, val) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) {
                arr.splice(i, 1);
                break;
            }
        }
    }

    var findSeleted = function () {
        for (var i = 0; i < $selectId.length; i++) {
            $(".search-result-item[data-id='" + $selectId[i] + "']").find("input[type='checkbox']").prop("checked", true);
            $(".search-result-item[data-id='" + $selectId[i] + "']").find(".search-result-select").addClass("selected");
        }
    }
    var i, jsonstr;
    $("#push-btn").click(function () {
        /*jsonstr="[{";
         for(i=0;i<$selectId.length;i++)
         {
         jsonstr +=$selectId[i] + ":" + "\"" + $selectId[i] + "\",";
         }
         jsonstr = jsonstr.substring(0,jsonstr.lastIndexOf(','));
         jsonstr += "}]";
         var t = eval(jsonstr);
         alert(jsonstr);*/

        form = $("<form method='post' action='${ctx}/quota/push'></form>");
        input = $("<input type='hidden'>").val($selectId.join(",")).attr('name','selectId')
        form.append(input);
        console.log("提交");
        form.appendTo("body").submit();
        return false;
    })
</script>
</body>
</html>
